<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <!-- 条件筛选 -->

        <el-form label-width="80px"
                 ref="enterInfo"
                 :model="companypage"
                 size="small">
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item prop="tags"
                            label="标签名称">
                <el-input v-model="companypage.tags"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="province"
                            label="城市">
                <el-select v-model="companypage.province"
                           @change="onloadcity"
                           clearable
                           placeholder="请选择"
                           class="select_fram">
                  <el-option v-for="(item,index) in cityinfo"
                             :key="index"
                             :label="item"
                             :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="city"
                            label="地区">
                <el-select v-model="companypage.city"
                           clearable
                           placeholder="请选择"
                           class="select_fram">
                  <el-option v-for="(item,index) in cityarea"
                             :key="index"
                             :label="item"
                             :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item prop="shortName"
                            label="企业简称">
                <el-input v-model="companypage.shortName"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item prop="state"
                            label="状态">
                <el-select v-model="companypage.state"
                           clearable
                           @clear='clearsearchfram'
                           class="select_fram"
                           placeholder="请选择">
                  <el-option v-for="item in stateoption"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6"
                    :push="2">
              <el-button type="primary"
                         @click="clearfrom"
                         plain>清除</el-button>
              <el-button type="primary"
                         @click="onLoadInfo">搜索</el-button>
              <el-button type="success"
                         @click="adduserinfo">新增用户</el-button>
            </el-col>
          </el-row>
        </el-form>

        <!-- /条件筛选 -->

        <!-- tips数据条数提示 -->
        <el-alert :closable="false"
                  type="info"
                  show-icon>
          <template slot="title">
            共有{{this.companypage.total}}条数据
          </template>
        </el-alert>
        <!-- /tips数据条数提示 -->

        <!-- 表格区域 -->
        <el-table style="width: 100%"
                  :data="companyinfo">
          <el-table-column align="center"
                           prop="id"
                           label="序号"
                           width="80">
          </el-table-column>
          <el-table-column prop="number"
                           align="center"
                           label="企业编号"
                           width="150">
          </el-table-column>
          <el-table-column prop="shortName"
                           align="center"
                           width="80"
                           label="企业简称">
          </el-table-column>
          <el-table-column prop="tags"
                           align="center"
                           width="80"
                           label="标签">
          </el-table-column>
          <el-table-column prop="username"
                           align="center"
                           label="创建者">
          </el-table-column>
          <el-table-column prop="addDate"
                           align="center"
                           label="创建日期">

            <template slot-scope="scope">
              {{scope.row.addDate|parseTimeByString}}
            </template>
          </el-table-column>
          <el-table-column prop="remarks"
                           align="center"
                           label="备注">
          </el-table-column>
          <el-table-column prop="state"
                           align="center"
                           width="100"
                           label="状态">
            <template slot-scope="scope">
              <el-tag type="success"
                      v-if="scope.row.state == 1">启用</el-tag>
              <el-tag type="warning"
                      v-else>禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           align="center"
                           width="180">
            <template slot-scope="scope">
              <el-button type="primary"
                         icon="el-icon-edit"
                         @click="editEnterInfo(scope.row)"
                         circle></el-button>
              <el-button type="success"
                         v-if="scope.row.state === 0"
                         icon="el-icon-check"
                         @click="modifyState(scope.row,'1')"
                         circle></el-button>
              <el-button type="info"
                         v-else
                         @click="modifyState(scope.row,'0')"
                         icon="el-icon-close"
                         circle></el-button>
              <el-button type="danger"
                         @click="removeEnterInfo(scope.row)"
                         icon="el-icon-delete"
                         circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- /表格区域 -->

        <!-- 分页区域 -->
        <el-pagination class="pager"
                       background
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="companypage.page"
                       :page-sizes="[5,10,15,20]"
                       :page-size="companypage.pagesize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="companypage.total">
        </el-pagination>
        <!-- /分页区域 -->

        <!-- 组件弹出框 -->
        <AddComUser ref="refDiaLogVisible"
                    @LoadEnterInfo="LoadEnterInfo" />
        <!-- /组件弹出框 -->
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, disabled, remove } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys.js'
import AddComUser from './components/add-comuser.vue'
import parseTimeByString from '@/filters/index'
export default {
  name: 'companys',
  components: {
    AddComUser
  },
  data() {
    return {
      companypage: {
        page: 1,
        pagesize: 5,
        total: 0,
        province: '',
        city: '',
        state: null,
        shortName: '',
        tags: ''
      },
      stateoption: [  
        {
          value: '1',
          label: '启用'
        },
        {
          value: '0',
          label: '禁用'
        }
      ],
      companyinfo: [],
      cityinfo: [],
      area: [],
      cityarea: []
    }
  },
  created() {
    this.onLoadInfo()
  },
  methods: {
    async onLoadInfo() {
      this.cityinfo = provinces()
      try {
        const { data } = await list(this.companypage)
        this.companyinfo = data.items
        this.companypage.total = data.counts
      } catch (err) {
        this.$message.error('获取企业信息失败')
      }
    },
    onloadcity() {
      this.cityarea = citys(this.companypage.province)
    },
    async modifyState(row, num) {
      try {
        await disabled({
          id: row.id,
          state: num
        })
        this.$message.success('状态修改成功')
      } catch (err) {
        this.$message.error('状态修改失败')
      }
      this.onLoadInfo()
    },
    handleSizeChange(newSize) {
      this.companypage.pagesize = newSize
      this.onLoadInfo()
    },
    handleCurrentChange(newPage) {
      this.companypage.page = newPage
      this.onLoadInfo()
    },
    clearsearchfram() {
      this.companypage.state = null
    },
    clearfrom() {
      this.$refs.enterInfo.resetFields()
      this.onLoadInfo()
    },
    adduserinfo() {
      this.$refs.refDiaLogVisible.AddUserDialogVisible = true
    },
    LoadEnterInfo() {
      this.onLoadInfo()
    },
    async removeEnterInfo(row) {
      try {
        await this.$confirm('此操作将永久删除该条数据,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove({ id: row.id })
        this.$message.success('删除成功')
        if (this.companyinfo.length === 1 && this.companypage.page !== 1) {
          this.companypage.page--
        }
        this.onLoadInfo()
      } catch (err) {
        this.$message.error('删除失败了')
      }
    },
    editEnterInfo(row) {
      this.$refs.refDiaLogVisible.editInfo = row
      this.$refs.refDiaLogVisible.editEnter()
    }
  }
}
</script>

<style lang="scss" scoped>
.select_fram {
  width: 300px;
}
.pager {
  float: right;
}
</style>
